<template>
	<view class="container">
		<view class="searchView">
			<view class="searchTitle">全网搜索</view>
			<input type="text" class="searchInput" :class="isActive ? 'active' : ''" @focus="isActive = true"
				@blur="isActive = false" placeholder="搜索内容" @confirm="tagSearch(ipValue)" v-model="ipValue">
		</view>
		<view class="searchTags">
			<view v-for="item in platforms">
				<navigator url="#" @click="tagSearch(item)">{{item}}</navigator>
			</view>
			<view>
				<navigator url="/src/pages/all-tags/all-tags">全部分类</navigator>
			</view>
		</view>
		<view class="title">{{title}}</view>
	</view>
	<DraggableRedBtn />
</template>

<script setup>
	import DraggableRedBtn from '@/src/components/DraggableRedBtn.vue'
	import { nextTick, onMounted, ref } from 'vue';
	import request from '@/src/utils/request.js'
	import { useTransferStore } from '../../store/transfer';

	const title = ref('')
	const ipValue = ref('')
	const isActive = ref(false)
	const platforms = ref([])

	const tagSearch = (tag) => {
		useTransferStore().send(tag)
		uni.navigateTo({
			url: '/src/pages/hot-list/hot-list'
		})
	}
	
	onMounted(() => {
		request.getYiyan().then(res => {
			title.value = res.hitokoto
		})
		
		request.getDailyHot().then(res => {
			platforms.value = res.data.platforms.slice(0, 10)
			useTransferStore().setGlobal(res.data.platforms)
		}).catch(console.error)
	})
</script>

<style lang="scss" scoped>
	.container {
		width: 90%;
		height: calc(100vh - 44px);
		margin: 20px auto;
		background-color: $uni-bg-color;
		position: relative;

		.searchView {
			margin: 100px auto 0 auto;
			width: 90%;

			.searchInput {
				border-radius: 5px;
				border: 1px solid #666;
				height: 40px;
				padding-left: 10px;
			}

			.searchInput.active {
				opacity: 0.6;
				border: 1px solid #0090d8;
			}

			.searchTitle {
				font-size: 18px;
				font-weight: bold;
				text-align: center;
				padding: 10px 0;
			}
		}

		.searchTags {
			margin-top: 10px;
			display: flex;
			flex-wrap: wrap;

			view {
				margin: 5px auto 0 auto;
				width: 168rpx;
				color: gray;
				text-align: center;
			}
		}

		.title {
			width: 100%;
			font-size: 14px;
			text-align: center;
			color: #888;
			position: absolute;
			bottom: 20vh;
		}
	}
</style>